<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
    <labelArea label="参数">
        <el-form size="small" label-suffix=" :">
            <el-form-item label="dll文件路径" inline>
                <!-- <el-input v-model="data.Path"></el-input>
                    <el-button>确认</el-button> -->
                <el-input v-model="data.Path" disabled></el-input>
                <el-button :disabled="!!data.Path" type="primary" @click="submit">上传</el-button>
                <!-- <el-button type="primary" @click="init">登录查询</el-button> -->
            </el-form-item>
            <el-form-item>
                <div class="flex-cc fdc" style="flex: 1;align-items: initial;">
                    <el-upload v-model:file-list="dllFileList" :action="baseurl + '/model-info/upload'"
                        :headers="{ tgc: store.token }" :before-upload="beforeUpload" :before-remove="reforeRemove"
                        :on-exceed="handleExceed" :on-success="handleSuccess" drag :auto-upload="false"
                        :data="uploadData" name="dllFile" ref="uploadDllRef" class="upload" :limit="1">
                        <template #trigger>
                            <el-icon size="24">
                                <Plus />
                            </el-icon>
                            <div class="el-upload__text" style="font-size: 10px;">
                                拖动文件至此 或 <em>点击选择文件</em>
                            </div>
                        </template>

                        <template #tip>
                            <div class="el-upload__tip">
                                上传dll文件，文件类型仅支持dll文件，一次仅可上传一个
                            </div>
                        </template>
                    </el-upload>
                    <el-upload v-model:file-list="fileList" :action="baseurl + '/model-info/uploads'"
                        :headers="{ tgc: store.token }" multiple :before-upload="beforeUpload"
                        :before-remove="reforeRemove" drag :auto-upload="false" :data="uploadData" name="files"
                        ref="uploadRef" class="upload">
                        <template #trigger>
                            <el-icon size="24">
                                <Plus />
                            </el-icon>
                            <div class="el-upload__text" style="font-size: 10px;">
                                拖动文件至此 或 <em>点击选择文件</em>
                            </div>
                        </template>

                        <template #tip>
                            <div class="el-upload__tip">
                                上传附加文件,支持同时上传多个文件
                            </div>
                        </template>
                    </el-upload>
                </div>
            </el-form-item>
            <el-form-item label="初始化数据">
                <el-input v-model="data.InitialCondition"></el-input>
            </el-form-item>
            <el-form-item label="Init Func">
                <el-input v-model="data.InitFunc"></el-input>
            </el-form-item>
            <el-form-item label="Onestep Func">
                <el-input v-model="data.OnestepFunc"></el-input>
            </el-form-item>
            <el-form-item label="Termunate Func">
                <el-input v-model="data.TerminateFunc"></el-input>
            </el-form-item>
            <el-form-item label="输入参数数量">
                <el-input v-model="data.NumofInput"></el-input>
            </el-form-item>
            <el-form-item label="输出参数数量">
                <el-input v-model="data.NumofOutput"></el-input>
            </el-form-item>
            <!-- <el-form-item label="仿真步长">
                <el-input v-model="data.TimeStep"></el-input>
            </el-form-item> -->
        </el-form>
    </labelArea>
</template>

<script setup>
import { ref, onMounted, watch, reactive } from 'vue';
import { baseurl } from '@/request/axiosset';
import { ElMessage } from 'element-plus';
import { get, post } from '@/request/axiosset';
import { useStore } from '@/stores/index'

const store = useStore()
const { data, illustrate, config } = defineProps(['data', 'illustrate', 'config'])



const uploadData = ref({
    modelId: store.SavedInformationId,
    tag: config.tag
})
const list = ref()
const uploadDllRef = ref()
const uploadRef = ref()
const fileList = ref([])
const dllFileList = ref([])
let submit = () => {
    uploadDllRef.value.submit()
    uploadRef.value.submit()
}



const init = async () => {
    const { data: { data: fileList } } = await get('/model-info/fileList', uploadData.value)
    list.value = fileList
    // list.value = fileList.other.map(i => ({ name: i }))
}
init()
watch(() => list.value, e => {
    console.log(e);
    data.Path = e.dll
    if (e.dll) uploadDllRef.value.handleStart({ name: data.Path, status: 'success' })
    for (const i of e.other) {
        console.log(i);
        uploadRef.value.handleStart({ name: i, status: 'success' })
    }
    console.log('👀', uploadDllRef.value, uploadRef.value)
})
function beforeUpload(e) {
    console.log(e, e.status);
    if (e.status == 'success') {
        e.reUpload = true
        return false
    }
}
async function reforeRemove(file, files) {
    console.log('🤔', file, files)
    if (file.reUpload) {
        ElMessage({ message: file.name + '文件已存在，请删除后重新上传', type: 'error', grouping: true })
        return false;
    }
    const { data: { code } } = await post('/model-info/deleteFile', { ...uploadData.value, fileName: file.name },
        { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
    if (code == 200) {
        ElMessage({ message: '删除成功', type: 'success', grouping: true })
        if (file.name == data.Path) data.Path = null
    } else return false;
}
function handleExceed(files, uploadFiles) {
    console.log(files, uploadFiles);
    ElMessageBox.confirm('是否删除已上传文件？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        reforeRemove(uploadFiles[0], uploadFiles).then(() => {
            uploadDllRef.value.clearFiles()
            uploadDllRef.value.handleStart(files[0])
        })
    })
}
function handleSuccess(e, f, g) {
    console.log('%c e,f,g ', 'font-size:13px; background:#29b9f6; color:#6dfdff;', e, f, g);
    let res;
    if (e.code == 200) {
        data.Path = e.data
        res = { message: '上传成功', type: 'success' }
    } else {
        uploadDllRef.value.clearFiles()
        res = { message: e.message + ',请重新上传', type: 'error' }
    }
    ElMessage(res)
}
</script>


<style scoped>
.upload {
    .el-upload__tip {
        font-size: 10px;
    }

    &>>>span {
        font-size: 12px;
        font-style: italic;
    }
}
</style>